<template>
	<div class="component-item mb20">
		<div class="back flex-between-center">
			<span @click="back">返回</span
			><span @click="showComponent = !showComponent"
				>{{ showComponent ? "关闭" : "打开" }}组件</span
			>
		</div>
		<component
			v-if="showComponent"
			:is="comp.component"
			class="card"
			ref="targetComp"
		></component>
		<div :id="keyName"></div>
		<div class="mb20">
			<p
				class="title hover"
				@click="collapse.dataShow = !collapse.dataShow"
			>
				<span>data属性：</span
				><button class="collapse-btn">
					{{ collapse.dataShow ? "收起" : "展开" }}
				</button>
			</p>
			<ul class="items-wrap" v-show="collapse.dataShow">
				<li
					v-for="(item, index) in dataItems"
					:key="index"
					class="item hover"
				>
					<span>{{ item.name }}:</span>
					<span>{{ item.value }}</span>
				</li>
			</ul>
			<p class="item" v-show="collapse.dataShow && dataItems.length == 0">
				暂无属性
			</p>
		</div>
		<div class="mb20">
			<p
				class="title hover"
				@click="collapse.propsShow = !collapse.propsShow"
			>
				props属性：
				<button class="collapse-btn">
					{{ collapse.propsShow ? "收起" : "展开" }}
				</button>
			</p>
			<ul class="items-wrap" v-show="collapse.propsShow">
				<li
					v-for="(item, index) in propsItems"
					:key="index"
					class="item hover"
				>
					<span>{{ item.name }}:</span>
					<span>{{ item.value }}</span>
				</li>
			</ul>
		</div>
		<div>
			<p
				class="title hover"
				@click="collapse.attributesShow = !collapse.attributesShow"
			>
				全部属性：
				<button class="collapse-btn">
					{{ collapse.attributesShow ? "收起" : "展开" }}
				</button>
			</p>
			<ul class="items-wrap" v-show="collapse.attributesShow">
				<li
					v-for="(item, index) in allAttributes"
					:key="index"
					class="item hover"
				>
					<span>{{ item.key }}:</span>
					<span>{{ item.value }}</span>
					<span class="type">类型：{{ item.type }}</span>
				</li>
			</ul>
		</div>
		<div class="part">
			<p
				class="title hover"
				@click="collapse.descShow = !collapse.descShow"
			>
				组件说明：<button class="collapse-btn">
					{{ collapse.descShow ? "收起" : "展开" }}
				</button>
			</p>
			<p class="desc" v-show="collapse.descShow">{{ comp.desc }}</p>
		</div>
	</div>
</template>

<script>
export default {
	name: "ContentItem",
	data() {
		return {
			propsItems: [], //props属性
			dataItems: [], //data属性
			allAttributes: [], //属性或方法
			collapse: {
				dataShow: false,
				propsShow: false,
				attributesShow: false,
				descShow: false,
			},
			showComponent: true,
		};
	},
	props: {
		comp: {
			type: Object,
			default: () => {
				return {};
			},
		},
		keyName: {
			type: String,
			default: -1,
		},
	},
	methods: {
		back() {
			this.$emit("back");
		},
	},
	mounted() {
		this.$nextTick(() => {
			window.setTimeout(() => {
				let target = this.$refs.targetComp;
				if (target) {
					for (let key in target._props) {
						let item = target._props[key];
						this.propsItems.push({
							name: key,
							value: item,
						});
					}
					for (let key in target._data) {
						let item = target._data[key];
						this.dataItems.push({
							name: key,
							value: item,
						});
					}
					for (let key in target) {
						if (/^[a-zA-Z]/.test(key) && key !== "constructor") {
							this.allAttributes.push({
								key: key,
								value: target[key],
								type: typeof target[key],
							});
						}
					}
				} else {
					for (let key in this.comp.propsData) {
						let item = this.comp.propsData[key];
						this.propsItems.push({
							name: key,
							value: item,
						});
					}
					for (let key in this.comp.data) {
						let item = this.comp.data[key];
						this.dataItems.push({
							name: key,
							value: item,
							type: typeof item,
						});
						this.allAttributes.push({
							key: key,
							value: item[key],
							type: typeof item,
						});
					}
					for (let key in this.comp.methods) {
						let item = this.comp.methods[key];
						this.allAttributes.push({
							key: key,
							value: item[key],
							type: "function",
						});
					}
				}
			}, 500);
		});
	},
};
</script>

<style scoped>
ul {
	list-style: none;
	padding-inline-start: 0;
}
p {
	margin: 0;
}
.component-item {
	padding-top: 30px;
}
div,
p {
	font-size: 14px;
}
.mb20 {
	margin: 0 0 20px;
}
.flex-between-center {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 鼠标在上面高亮 */
.hover:hover {
	color: #42b983;
}
/* 返回 */
.back {
	background: #42b983;
	padding: 10px;
	color: white;
	font-size: 14px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
}
.card {
	border-radius: 4px;
	border: 1px solid #ebeef5;
	background-color: #fff;
	overflow: hidden;
	color: #303133;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	margin-bottom: 20px;
}
.items-wrap {
	text-align: left;
	background: white;
}
/* 展开收起按钮 */
.collapse-btn {
	font-size: 12px;
	background: white;
	border: 0;
	cursor: pointer;
}
/* 下拉面板 */
.title {
	cursor: pointer;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	line-height: 48px;
	background-color: #fff;
	color: #303133;
	border-bottom: 1px solid #ebeef5;
	font-size: 14px;
	transition: border-bottom-color 0.3s;
	outline: none;
	font-weight: bold;
	padding: 0 20px;
}
/* 每个属性项 */
.item {
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: break-all;
	line-height: 23px;
	font-size: 14px;
	border-bottom: 1px solid #ebeef5;
	padding: 10px 10px;
}
.null {
	font-size: 14px;
}
.desc {
	padding: 20px;
	font-size: 14px;
	text-align: left;
}
/* 类型 */
.type {
	color: #10808a;
}
</style>
